import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入本地token
import { getToken } from '@/utils/storage'
// // 引入登陆页面组件
// import login from '@/views/Login'
// // 引入layout主页组件
// import layout from '@/views/Layout'
// // 引入Home二级组件
// import home from '@/views/Layout/Home'
// // 引入Articles二级组件
// import articles from '@/views/Layout/Articles'
// // 引入Pictures二级组件
// import pictures from '@/views/Layout/Pictures'
// // 引入add-article二级组件
// import addArticle from '@/views/Layout/Add-article'
// // 引入comment二级组件
// import comment from '@/views/Layout/Comment'
// // 引入fans二级组件
// import fans from '@/views/Layout/Fans'
// // 引入settings二级组件
// import settings from '@/views/Layout/Settings'
// // 引入404组件
// import notFound from '@/views/NotFound'

// 实现路由懒加载
const login = () => import('@/views/Login')
const layout = () => import('@/views/Layout')
const home = () => import('@/views/Layout/Home')
const articles = () => import('@/views/Layout/Articles')
const pictures = () => import('@/views/Layout/Pictures')
const addArticle = () => import('@/views/Layout/Add-article')
const comment = () => import('@/views/Layout/Comment')
const fans = () => import('@/views/Layout/Fans')
const settings = () => import('@/views/Layout/Settings')
const notFound = () => import('@/views/NotFound')

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: login },
    {
      path: '/',
      component: layout,
      children: [
        { path: '', component: home },
        { path: '/articles', component: articles },
        { path: '/pictures', component: pictures },
        { path: '/add-article', component: addArticle },
        { path: '/edit-article/:id', component: addArticle },
        { path: '/comment', component: comment },
        { path: '/fans', component: fans },
        { path: '/settings', component: settings }
      ]
    },
    // *是匹配所有路径,放在最后是因为以上路径都没找到之后,匹配404组件
    { path: '*', component: notFound }
  ]
})
// 全局前置守卫: 所有路由的跳转, 都会先经过全局前置守卫, 只有全局前置守卫放行了, 才会真正显示路由匹配的内容
router.beforeEach((to, from, next) => {
  // console.log(to)// 跳到目标页面包含的信息
  // console.log(from)// 当前需跳转页面包含的信息
  // console.dir(next)// 守卫放行执行的函数,参数为path
  const token = getToken()
  if (token || to.path === '/login') {
    next()
  } else {
    next('/login')
  }
})
export default router
